<template>
  <a-modal v-model:open="visible" title="导出提示" width="500px" :footer="null" destroy-on-close>
    <div class="export-excel-box">
      <div class="content">
        <p v-if="percent >= 100 && fileVo.url" class="download" @click="downloadFile(fileVo.url)">
          <span>{{ fileVo?.fileName }}</span>
          <icon-font type="icon-xiajia" style="margin-left: 5px" />
        </p>
        <Progress v-else :percent="percent" :size="[300, 20]" />
      </div>
      <div class="close-btn">
        <a-button type="primary" size="large" style="width: 200px" @click="visible = false">关闭窗口</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script setup>
/**
 * --------------------------------------------------------------------
 * Component 导出excel 文件组件
 * ----------------------------------------------------------------------
 * Description 未经许可不能去掉去掉boli相关版权信息
 * ----------------------------------------------------------------------
 * Author: Eric E-mail: <huaboli1314@163.com>
 * ----------------------------------------------------------------------
 */

import { Progress } from 'ant-design-vue'

const visible = ref(false) //
const percent = ref(0) //
const fileVo = ref(null) //

function increase(num) {
  const timer = setInterval(() => {
    if (percent.value <= num) {
      percent.value = percent.value + 2
    } else {
      clearInterval(timer)
    }
  }, 100)
}

function downloadFile(url) {
  const link = document.createElement('a')
  link.href = url
  link.download = fileVo.value.fileName
  document.body.appendChild(link)
  link.click()
  document.body.removeChild(link)
}

/**
 * 打开导出文件
 * @param pathUrl
 * @param params
 */
async function open(pathUrl, params) {
  percent.value = 0
  visible.value = true
  fileVo.value = await httpRequest(pathUrl, params)
  if (!fileVo.value.fileName) {
    message.warning('暂无数据')
    visible.value = false
  }
  increase(100)
}

defineExpose({ open })
</script>

<style lang="less" scoped>
.export-excel-box {
  display: flex;
  flex-direction: column;
  justify-content: center;
  justify-items: center;

  .content {
    margin: 60px 0;

    .download {
      font-size: 16px;
      color: var(--current-color);
      text-align: center;
      cursor: pointer;
    }
  }

  .close-btn {
    display: flex;
    justify-content: center;
  }
}
</style>
